<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="item in list" :key="item.id" @click="toDetail(item.id)">
                    <div class="itemimg">
                        <!-- <img :src="item.image" alt=""> -->
                        <img v-lazy="item.image" alt="">
                    </div>
                    <div class="iteminfo">
                        <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                        <p class="price">￥ {{ item.price }}</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>

<script>
import request from '@/utils/request.js'
export default {
    data() {
        return {
            list: [],
            loading: false, // 加载状态
            finished: false, // 是否加载完成
            pagination: 1, // 页码
            isLoading: false // 下拉刷新的状态
        }
    },
    // 生命周期
    // created() {
    //     request.get('/list').then(res => {
    //         console.log(res, 'res')
    //         if (res.data.code == 200) {
    //             this.list = res.data.data
    //         }
    //     })
    // },
    methods: {
        // 页面刚一进来默认也会执行一次
        // 当组件滚动到页面底部时，会触发 load 事件
        onLoad() {
            // 先展示loading
            this.loading = true
            // 请求数据 --- 分页请求
            request.get('/list', {
                params: {
                    pagination: this.pagination, // 变量
                    pageNum: 10
                }
            }).then(res => {
                if (res.data.code == 200) {
                    // res.data.data永远只有10条数据
                    // this.list = res.data.data

                    // 数组拼接  concat  
                    // this.list = this.list.concat(res.data.data)
                    // es6中数组的扩展
                    this.list = [...this.list, ...res.data.data]
                }
                // 关闭loading
                this.loading = false
                // 页码+1
                this.pagination++
                // 判断是否还有数据
                if (this.list.length >= res.data.total) {
                    // 数据请求完毕
                    this.finished = true
                }
            })
        },
        onRefresh() {
            // 下拉的时候展示loading
            // 延时一秒后关闭loading,同时展示刷新成功
            this.isLoading = true
            setTimeout(() => {
                this.isLoading = false
            }, 1000)
        },
        toDetail(id) {
            // this.$router.push('/detail/' + id)
            this.$router.push(`/detail/${id}`) // es6中的模板字符串
        }
    }

}

</script>

<style lang="scss" scoped>
ul {
    overflow: hidden; // 解决高度塌陷

    // column-count: 2; // 列数
    // column-gap: 10px; // 列间距

    li {
        float: left;
        width: 49%;
        margin: 0.5%;

        // break-inside: aviod; //  避免在元素内部换行

        .itemimg {
            img {
                width: 100%;
            }
        }

        .iteminfo {
            padding: 2px 8px;

            .price {
                color: red;

            }

        }
    }
}
</style>